<template>
   
    <div class="sysconfig">
         
       <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 系统设置</el-breadcrumb-item>
                <el-breadcrumb-item>系统配置</el-breadcrumb-item>
            </el-breadcrumb>
      </div> -->

      <div class="container">
         <el-form :model="logValue" ref="logValue" label-width="100px" class="demo-ruleForm">       
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>日志跟踪配置</span>
                    <el-button style="float: right; padding: 3px 0" type="text"  class="green"  icon="el-icon-position"  @click="submitForm('logValue')" v-if="logSaveFlag">保存</el-button>
                    <el-button style="float: right; padding: 3px 0" type="text"   icon="el-icon-edit" @click="logEdit"  v-if="logEditFlag">修改</el-button>
                </div>
                <div class="inputStyles">
                    <el-form-item
                        prop="field1"
                        :rules="[{ required: true, message: '不能为空'}]"
                    >
                      <el-input v-model="logValue.field1" placeholder="" class="inputStyle" :disabled="logDisabled"></el-input>小时无日志跟踪自动归入共享池。
                    </el-form-item>
                </div>
            </el-card>
          </el-form>

         <el-form :model="showLogValue" ref="showLogValue" label-width="100px" class="demo-ruleForm" style="float:right">       
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>每天可获得共享资源数量配置</span>
                    <el-button style="float: right; padding: 3px 0" type="text"  class="green"  icon="el-icon-position" v-if="showSaveFlag"  @click="savetForm('showLogValue')">保存</el-button>
                    <el-button style="float: right; padding: 3px 0" type="text"   icon="el-icon-edit" v-if="showEditFlag" @click="showEdit">修改</el-button>
                </div>
                <div class="inputStyles">
                    <el-form-item
                        prop="field1"
                        :rules="[{ required: true, message: '不能为空'}]"
                    >
                       每天每个员工最多可获得<el-input  v-model="showLogValue.field1" placeholder="" class="inputStyle" :disabled="showDisabled"></el-input>个共享资源。
                    </el-form-item>
                </div>
            </el-card>
         </el-form>

        <!-- <el-form :model="tipTimeValue" ref="tipTimeValue" label-width="100px" class="demo-ruleForm">       
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>客户资质到期提醒时间配置</span>
                    <el-button style="float: right; padding: 3px 0" type="text"  class="green"  icon="el-icon-position" v-if="tipTimeSaveFlag"  @click="tipTimeSavetForm('tipTimeValue')">保存</el-button>
                    <el-button style="float: right; padding: 3px 0" type="text"   icon="el-icon-edit" v-if="tipTimeEditFlag" @click="tipTimeEdit">修改</el-button>
                </div>
                <div class="inputStyles">
                    <el-form-item
                        prop="field1"
                        :rules="[{ required: true, message: '不能为空'}]"
                    >
                     <el-input  v-model="tipTimeValue.field1" placeholder="" class="inputStyle" :disabled="tipTimeDisabled"></el-input>天客户资质将到期。
                    </el-form-item>
                </div>
            </el-card>
         </el-form> -->

         <el-form :model="timeValue" ref="timeValue" label-width="100px" class="ruleForm">       
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>登陆限制</span>
                    <el-button style="float: right; padding: 3px 0" type="text"  class="green"  icon="el-icon-position" v-if="timeSaveFlag"  @click="timesavetForm('timeValue')">保存</el-button>
                    <el-button style="float: right; padding: 3px 0" type="text"   icon="el-icon-edit" v-if="timeEditFlag" @click="timeshowEdit">修改</el-button>
                </div>
                <div>
                    <el-row >
                     <el-col :span="6">
                           <el-form-item  label="开始时间"  prop="field1" :rules="[{ required: true, message: '不能为空'}]" >
                                    <el-time-select
                                        v-model="timeValue.field1"
                                        :disabled="timeDisabled"
                                        :picker-options="{
                                            start: '08:30',
                                            step: '00:15',
                                            end: '24:00'
                                        }"
                                        placeholder="选择时间">
                                    </el-time-select>
                            </el-form-item>   
                     </el-col>
                     <el-col :span="6">
                          <el-form-item label="结束时间"  prop="field2" :rules="[{ required: true, message: '不能为空'}]">
                                    <el-time-select
                                        v-model="timeValue.field2"
                                        :disabled="timeDisabled"
                                        :picker-options="{
                                            start: '08:30',
                                            step: '00:15',
                                            end: '24:00'
                                        }"
                                        placeholder="选择时间">
                                    </el-time-select>
                            </el-form-item> 
                     </el-col>
                     <el-col :span="12" >
                         <el-form-item label="禁止所有时间段登陆" class="timestyle" prop="field3" :rules="[{ required: true, message: '不能为空'}]">
                                <el-select v-model="timeValue.field3" placeholder="请选择" :disabled="timeDisabled">
                                        <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                </el-select>
                        </el-form-item> 
                     </el-col>
                    </el-row>       
                </div>
            </el-card>
         </el-form>
         <!-- 证书数量配置 -->
        <el-form :model="numLogValue" ref="numLogValue" label-width="100px" class="demo-ruleForm">       
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>客户数量配置</span>
                    <el-button style="float: right; padding: 3px 0" type="text"  class="green"  icon="el-icon-position" v-if="numSaveFlag"  @click="savetForm2('numLogValue')">保存</el-button>
                    <el-button style="float: right; padding: 3px 0" type="text"   icon="el-icon-edit" v-if="numEditFlag" @click="numEdit">修改</el-button>
                </div>
                <div class="inputStyles">
                    <el-form-item
                        prop="field1"
                        :rules="[{ required: true, message: '不能为空'}]"
                    >
                       每天每个员工最多可获得<el-input  v-model="numLogValue.field1" placeholder="" class="inputStyle" :disabled="numDisabled"></el-input>个共享资源。
                    </el-form-item>
                </div>
            </el-card>
         </el-form>

      </div> 

    </div>

</template>

<script>
import { timesavetForm,getData } from "@/api/systemSettings/sysconfig";
export default {
  components: {},
  props:[],
  data() {
    return {
        //数据  
         tableData:[],  
         //到期
         tipTimeValue: {},
         tipTimeEditFlag:true, 
         tipTimeDisabled:true,
         tipTimeSaveFlag:false,
         //log
         logSaveFlag:false,
         logEditFlag:true,
         logDisabled:true,
         logValue: {
         },
         //show
         showLogValue: {},
         showEditFlag:true, 
         showDisabled:true,
         showSaveFlag:false,
         //num
         numLogValue: {},
         numEditFlag:true, 
         numDisabled:true,
         numSaveFlag:false,
         //time
         timeValue: {
             field1:'',
             field2:'',
             field3:'',
             id:''
         },
         timeEditFlag:true, 
         timeDisabled:true,
         timeSaveFlag:false,
         options: [
            {
              value: '1',
              label: '是'
            },
            {
               value: '0',
               label: '否'
           },
        ],
    };
  },
  computed: {},
  created() {
      this.getData();
      console.log('--------2---------')
  },
  mounted() {
      console.log('-------1------')

  },
  watch: {
      
  },
  methods: {
      //到期限制
      tipTimeEdit(){
          this.tipTimeSaveFlag=true;
          this.tipTimeEditFlag=false;
          this.tipTimeDisabled=false;
      },
       tipTimeSavetForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
               var _this=this;
               let params={
                   id:this.tipTimeValue.id,
                   field1:this.tipTimeValue.field1
               };
               timesavetForm(params)
                    .then((res) => {
                    if(res.code !='200'){      
                         setTimeout(() =>{                      
                            this.$message.success('保存失败');
                        }, 0.1 * 1000 ); 
                    }else{
                       setTimeout(() =>{
                            this.$message.success('保存成功')
                        }, 0.1 * 1000 ); 
                        this.tipTimeSaveFlag=false;
                        this.tipTimeEditFlag=true;
                        this.tipTimeDisabled=true;
                        this.getData();
                    }                           
                })
                .catch(() => {
                    console.log('error submit!!');
                    return false;
                });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //登陆限制
      timeshowEdit(){
          this.timeSaveFlag=true;
          this.timeEditFlag=false;
          this.timeDisabled=false;
      },
      timesavetForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
               var _this=this;
               let params={
                   id:this.showLogValue.id,
                   field1:this.showLogValue.field1
               };
               timesavetForm(this.timeValue)
                    .then((res) => {
                    if(res.code !='200'){      
                         setTimeout(() =>{                      
                            this.$message.success('保存失败');
                        }, 0.1 * 1000 ); 
                    }else{
                       setTimeout(() =>{
                            this.$message.success('保存成功')
                        }, 0.1 * 1000 ); 
                        this.timeSaveFlag=false;
                        this.timeEditFlag=true;
                        this.timeDisabled=true;
                        this.getData();
                    }                           
                })
                .catch(() => {
                    console.log('error submit!!');
                    return false;
                });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      savetForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
               var _this=this;
               let params={
                   id:this.showLogValue.id,
                   field1:this.showLogValue.field1
               };
               timesavetForm(params)
                    .then((res) => {
                    if(res.code !='200'){      
                         setTimeout(() =>{                      
                            this.$message.success('保存失败');
                        }, 0.1 * 1000 ); 
                    }else{
                       setTimeout(() =>{
                            this.$message.success('保存成功')
                        }, 0.1 * 1000 ); 
                        this.showSaveFlag=false;
                        this.showEditFlag=true;
                        this.showDisabled=true;
                        this.getData();
                    }                           
                })
                .catch(() => {
                    console.log('error submit!!');
                    return false;
                });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      savetForm2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
               var _this=this;
               let params={
                   id:this.numLogValue.id,
                   field1:this.numLogValue.field1
               };
               timesavetForm(params)
                    .then((res) => {
                    if(res.code !='200'){      
                         setTimeout(() =>{                      
                            this.$message.success('保存失败');
                        }, 0.1 * 1000 ); 
                    }else{
                       setTimeout(() =>{
                            this.$message.success('保存成功')
                        }, 0.1 * 1000 ); 
                        this.numSaveFlag=false;
                        this.numEditFlag=true;
                        this.numDisabled=true;
                        this.getData();
                    }                           
                })
                .catch(() => {
                    console.log('error submit!!');
                    return false;
                });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      showEdit(){
          this.showSaveFlag=true;
          this.showEditFlag=false;
          this.showDisabled=false;
      },
      numEdit(){
          this.numSaveFlag=true;
          this.numEditFlag=false;
          this.numDisabled=false;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
               var _this=this;
               let params={
                   id:this.logValue.id,
                   field1:this.logValue.field1
               };
               timesavetForm(params)
                    .then((res) => {
                    if(res.code !='200'){      
                         setTimeout(() =>{                      
                            this.$message.success('保存失败');
                        }, 0.1 * 1000 ); 
                    }else{
                       setTimeout(() =>{
                            this.$message.success('保存成功')
                        }, 0.1 * 1000 ); 
                        this.logSaveFlag=false;
                        this.logEditFlag=true;
                        this.logDisabled=true;
                        this.getData();
                    }                           
                })
                .catch(() => {
                    console.log('error submit!!');
                    return false;
                });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      logEdit(){
          this.logSaveFlag=true;
          this.logEditFlag=false;
          this.logDisabled=false;
      },
     //获取数据
     getData(){
        getData({
            pageNum:1,
            pageSize:100
        }).then((res) => {
                  if(res.code=='200'){
                      console.log(res)
                    //   this.tableData=res.data;
                    //   this.logValue=res.data[0];
                    //   this.showLogValue=res.data[1];
                    //   this.numLogValue=res.data[4];
                    //   this.tipTimeValue=res.data[2];
                    //   this.timeValue={
                    //         field1:res.data[3].field1,
                    //         field2:res.data[3].field2,
                    //         field3:res.data[3].field3,
                    //         id:res.data[3].id,
                    //         realName:''
                    //   }
                  }                          
            })
            .catch(() => {
                console.log('error submit!!');
                return false;
            });
       },
  }
};
</script>

<style>
.timestyle .el-form-item__label{
   width: 150px !important;
}
  .inputStyles .el-form-item__content{
      margin-left:0 !important;
  }
</style>
<style scoped>

.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 100% !important;
}
.inputStyle{
    width: 35%;
}
  .handle-box {
    margin-bottom: 10px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.yellow{
    color:#f57506
}
.green{
    color:green
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
} 
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
   display: inline-block;
    margin-right:50px
  }
  .demo-ruleForm{
       width: 48%;
       display: inline-block;
  }
  .ruleForm,.ruleForm .box-card{
      width:99%;
  }

</style>